CSS Border Radius Property

    In this CSS tutorial, we will be going to explore the border-radius property and its accepted values. We will see how this property can be used while styling an element and what other properties are associated with it.

    CSS border-radius Property

    The border-radius property defines the radius of the elements border’s corners. Using this property, we can also round the corner of an image.

    Example 

    <!DOCTYPE html>
<html>
<head>
  <style>
    p{
        border-radius: 25px;
        border: 2px solid green;
        background-color: lightblue;
        padding: 30px;
        width: 300px;
        height: 200px;
    }
  </style>
</head>
<body>
    <p>Border Corners are rounded</p>
</body>
</html>

    Round Specific Corner

    There are 4 other properties associated with the border-radius property, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. With the help of these properties we can style specific border corners.

    Example

    Round only the top border corners 

    <!DOCTYPE html>
<html>
<head>
  <style>
    p{
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        border: 2px solid green;
        background-color: lightblue;
        padding: 30px;
        width: 300px;
        height: 200px;
    }
  </style>
</head>
<body>
    <p>Top Border Corners are rounded</p>
</body>
</html>

    Using Shorthand border-radius property

    Instead of using border-top-left-radius or border-top-right-radius, we can use the shorthand border-radius property. Using this property with a single statement we can define different radius for every corner. The shorthand border-radius property can accept 4 values at once which represent all the four corners.

    Syntax: 

    selector{ border-radius: top-left top-right bottom-right bottom-left}

    Example 

    <!DOCTYPE html>
<html>
<head>
  <style>
    p{  /* top-left= 25px top-right = 0px bottom-left=50px bottom-right=40px */
        border-radius: 25px 0px 40px 50px;
        border: 2px solid green;
        background-color: lightblue;
        padding: 30px;
        width: 300px;
        height: 200px;
     }
  </style>
</head>
<body>
    <p>Border Corners are rounded</p>
</body>
</html>

    Summary

    • The CSS border-radius property makes the border corners rounded.
    • It accepts values in length units.
    • There are 4 child properties associated with border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius
    Previous Tutorial Next Tutorial